<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { Warning } from '@element-plus/icons-vue'
import { defaultFormData, formRules } from '../index'
import type {
  CustomDialogInstance,
  MenuInfo,
  MenuSaveOrUpdateParams,
} from '@/types'

import { sysMenuApi } from '@/api'
// ------------------use------------------
// #region
const props = defineProps<{
  title: string
  menuData: MenuInfo[]
}>()
const emits = defineEmits<{
  'save-success': []
}>()
const formData = defineModel('data', {
  default: () => defaultFormData,
})

// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const dialogRef = ref<CustomDialogInstance | null>(null)
const formRef = ref<FormInstance | null>(null)
// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
const computedMenu = computed(() => {
  const arr: MenuInfo[] = []
  const func = (
    data: MenuInfo[],
    container: MenuInfo[],
  ) => {
    data.forEach((item) => {
      if (item.menuType === 1) {
        const o = {
          ...item,
          children: [],
        }
        container.push(o)
        if (item.children) {
          func(item.children, o.children)
        }
      }
    })
  }
  func(props.menuData, arr)

  return arr
})
// #endregion
// ------------------生命周期------------------
// #region
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function open() {
  dialogRef.value?.open?.()
  await nextTick()
  dialogRef.value?.setSaving?.(false)
  formRef.value?.resetFields()
}
function close() {
  dialogRef.value?.close?.()
}
async function clickSave(done: () => void) {
  try {
    await formRef.value?.validate()
    await addOrUpdateData(formData.value)
    done()
    emits('save-success')
  }
  catch (error) {
    done()
  }
}
function handleMenuType() {
  formData.value.isFullscreen = Number(
    formData.value.menuType === 4,
  )
  formData.value.isHidden = Number(
    formData.value.menuType === 4,
  )
}
async function addOrUpdateData(row: Partial<MenuSaveOrUpdateParams>) {
  const params = { ...row }
  // if (params.menuType !== 3 && !params.parentId) {
  if (!params.parentId) {
    params.parentId = 0
  }
  removeUnnecessaryParams(params)
  await sysMenuApi.saveOrUpdate(params)
}
// #endregion
defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    :title="title"
    need-saving
    width="600px"
    @confirm="clickSave"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      label-position="right"
      class="flex-direction align-center width-fill flex"
    >
      <el-form-item
        prop="menuType"
        label="菜单类型"
        class="width-fill"
      >
        <el-radio-group
          v-model="formData.menuType"
          @change="handleMenuType"
        >
          <el-radio :label="1">
            目录
          </el-radio>
          <el-radio :label="2">
            页面
          </el-radio>
          <!-- <el-radio :label="4">
            驾驶舱
          </el-radio>
          <el-radio :label="3">
            第三方跳转
          </el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" class="width-fill">
        <template #label>
          <span class="align-center flex">
            上级菜单
            <el-tooltip
              content="不选默认为最根级"
              placement="top"
            >
              <el-icon
                class="c-pointer fs-16 margin-left-xs"
              >
                <Warning />
              </el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-cascader
          v-model="formData.parentId"
          :options="(computedMenu as any[])"
          :props="{
            label: 'menuName',
            value: 'id',
            emitPath: false,
            checkStrictly: true,
          }"
          filterable
          class="width-fill"
        />
      </el-form-item>
      <!-- <el-form-item v-else label="上级菜单" prop="parentId" class="width-fill">
        <el-cascader
          v-model="formData.parentId"
          :options="(computedMenu as any[])"
          :props="{
            label: 'menuName',
            value: 'id',
            emitPath: false,
            checkStrictly: true
          }"
          class="width-fill"
        />
      </el-form-item> -->
      <el-form-item label="菜单排序" class="width-fill">
        <template #label>
          <span class="align-center flex">
            菜单排序
            <el-tooltip
              content="数值越小排序等级越高"
              placement="top"
            >
              <el-icon
                class="c-pointer fs-16 margin-left-xs"
              >
                <Warning />
              </el-icon>
            </el-tooltip>
          </span>
        </template>
        <el-input-number
          v-model="formData.xh"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item
        v-if="formData.menuType === 3"
        label="重定向"
        prop="redirect"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.redirect"
          clearable
          maxlength="50"
          placeholder="请输入重定向路径"
        />
      </el-form-item>
      <el-form-item
        v-if="[2, 4].includes(formData.menuType!)"
        label="标识"
        prop="identifying"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.identifying"
          clearable
          maxlength="50"
          placeholder="请输入菜单标识"
        />
      </el-form-item>
      <el-form-item
        label="菜单名称"
        prop="menuName"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.menuName"
          clearable
          maxlength="50"
          placeholder="请输入菜单名称"
        />
      </el-form-item>
      <el-form-item
        label="菜单标题"
        prop="menuTitle"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.menuTitle"
          clearable
          maxlength="50"
          placeholder="请输入菜单标题"
        />
      </el-form-item>
      <el-form-item
        v-if="[2, 4].includes(formData.menuType!)"
        label="菜单路径"
        prop="menuAddress"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.menuAddress"
          maxlength="50"
          clearable
          placeholder="请输入菜单路径,以/开头"
        />
      </el-form-item>
      <el-form-item label="菜单状态" class="width-fill">
        <!-- <el-checkbox
          v-model="formData.menuEnable"
          :true-label="1"
          :false-label="0"
          label="启用"
          border
        /> -->
        <el-checkbox
          v-if="![1, 3, 4].includes(formData.menuType!)"
          v-model="formData.isFullscreen"
          :true-label="1"
          :false-label="0"
          label="全屏"
          border
        />
        <el-checkbox
          v-model="formData.isHidden"
          :true-label="1"
          :false-label="0"
          label="隐藏"
          border
        />
      </el-form-item>
    </el-form>
  </CustomDialog>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
